<template>
  <div class="mymap">
    <baidu-map class="allmap" @ready="mapReady"> </baidu-map>
    <div class="title">
      <h3>{{ products.store_name }}</h3>
      <p>{{ products.address }}</p>
      <p>{{ products.store_datails }}</p>
      <p><van-rate v-model="value" /></p>
      <button @click="goBaiduMap">到这去</button>
    </div>
    <back></back>
  </div>
</template>
<script>
export default {
  props: ["sid"],
  data() {
    return {
      point: "",
      lat: "",
      long: "",
      // 评价
      value: 5,
      products: [],
    };
  },
  methods: {
    mapReady({ BMap, map }) {
      // 获取当前位置的经纬度 然后设置地图
      // let geoloc = window.navigator.geolocation;
      // getCurrentPosition(
      // (res) => {
      let lat = this.products.latitude; // 纬度
      let long = this.products.longitude; // 经度
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(long, lat);
      map.centerAndZoom(this.point, 18);
      map.enableDragging();
      // 启动放大缩小
      map.enableScrollWheelZoom();
      // 添加平移缩放控件
      map.addControl(new BMap.NavigationControl());
      // 创建标注
      map.addControl(new BMap.GeolocationControl());
      //添加地图类型控件
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      // LBS服务  查询周边
      let localSearch = new BMap.LocalSearch(this.point, {
        // options对象，指定搜索结束后的回调
        onSearchComplete: (res) => {
          // 信息窗口
          let content = `<div class="maptitle">${res.Hr[0].title}</div><div>地址：${res.Hr[0].address}</div><div>电话：${res.Hr[0].phoneNumber}</div>`;
          let opts = {
            width: 260, // 信息窗口宽度
            height: 90, // 信息窗口高度
            offset: { height: -50, width: 0 },
          };
          let infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
          map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
          // 覆盖物
          function addMarker(point, index) {
            // 创建图标对象
            var myIcon = new BMap.Icon(
              require("../assets/location.png"),
              new BMap.Size(50, 50),
              {
                anchor: new BMap.Size(25, 50),
                imageOffset: new BMap.Size(0, 0 - index * 25),
              }
            );
            // 创建标注对象并添加到地图
            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            // 添加事件
            marker.addEventListener("click", (e) => {
              map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
            });
          }
          addMarker(this.point);
        },
      });
      localSearch.search(this.products.store_name);
      // },
      // );
    },
    // 跳转百度导航
    goBaiduMap() {
      window.location.href =
        "http://api.map.baidu.com/geocoder?address=" +
        this.Location +
        "&output=html&src=this.point";
    },
  },
  mounted() {
    let sid = this.$route.query.sid;
    this.axios.get("/store?id=sid").then((result) => {
      this.products = result.data.data[parseInt(sid - 1)];
    });
  },
  watch: {
    //监视地址栏的商品编号
    sid() {
      this.axios.get("/store?id=sid");
    },
  },
};
</script>

<style >
.mymap .allmap {
  height: 80vh;
  width: 100%;
  margin: 0 auto;
}
.mymap .title {
  width: 90%;
  height: 15%;
  position: fixed;
  bottom: 0;
  z-index: -10;
  text-align: left;
  padding: 6% 5%;
  line-height: 22px;
}
.mymap .maptitle {
  font-size: 16px;
  margin-bottom: 10px;
}
.mymap .title > button {
  width: 150px;
  height: 35px;
  border-radius: 35px;
  border: 0;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>